import React from 'react';
import ReactDom from 'react-dom';
import {Button,Menu,Modal,Icon,Tabs,message,Form,Input,CheckBox} from 'antd';
import 'antd/dist/antd.css';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const MenuItemGroup = Menu.MenuItemGroup;
import { Row,Col } from 'antd';
import {Router, Route, Link, hashHistory} from 'react-router';
import Header from './header';
import Footer from './footer';

export default class Detaile extends React.Component{
    constructor(){
		super();
		this.state={
		   Arccontent:'',
		}
	};
	componentWillMount() {
		var id=this.props.params.articleid;
    	var myFetchOptions ={
			method:'GET'
		};
    	var res = fetch("/selectOne?id="+id,myFetchOptions);
        res.then(response => response.json()).then(json=>{
      	if(json.state){
      		this.setState({Arccontent:json.mes});
      	}else{
      		message.error(json.mes);
      	}
      });
    };
	render(){
		let {Arccontent} = this.state;
		const title = Arccontent?Arccontent[0].title:"";
		const author = Arccontent?Arccontent[0].author:"";
		const text = Arccontent?Arccontent[0].text:"";
		return (
			<div>
			    <Header/>
			    <Row>
			    	<Col span={4}></Col>
			    	<Col span={16}>
					    <div class="content">
					    	<h2 style={{textAlign:"center",width:"100%"}}>{title}</h2>
					    	<p style={{textAlign:"center",width:"100%"}}>{author}</p>
					    	<p dangerouslySetInnerHTML = {{__html:text}}></p>
					    </div>
					</Col>
					<Col span={4}></Col>
				</Row>
			    <Footer/>
			</div>
		);
	}
}